﻿<!DOCTYPE html>
<!--作业基本信息配置列表-->
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
        <script src="/static/js/common.js"></script>

    <link href="../static/js/vue-treeselect/vue-treeselect.css" rel="stylesheet" />
    <script src="../static/js/vue-treeselect/vue-treeselect.js"></script>
    <style>
        body {
            padding-bottom: 10px;
        }


        .el-dialog__body {
            height: 100% !important;
        }

        .el-dialog.is-fullscreen {
            overflow: hidden !important;
        }

        .vue-treeselect__placeholder {
            top: -3px;
        }

        .vue-treeselect__single-value {
            top: -3px;
        }

        .el-col {
            padding: 10px;
            font-size: 14px
        }

        .el-form-item {
            margin-bottom: 0px !important;
        }

        .el-input-group__prepend,
        .el-form-item__label {
            color: #000;
            font-size: 14px
        }

        .el-input__inner {
            color:  #606266
        }

        .elst-select-mini,
        .el-form-item__label {
            padding: 0 !important;
        }

        .elst-select-mini .el-form-item__label,
        .elst-select-mini .el-date-editor {
            height: 28px;
            margin-top: -5px;
            color: #000
        }

        .el-input-group__append,
        .el-input-group__prepend {
            padding: 0;
        }

        .vue-treeselect__control {
            border: none
        }
        
        .vue-treeselect__control,.vue-treeselect__value-container,.vue-treeselect__input-container,.vue-treeselect__input{
            height: 20px!important;
        }
    </style>
</head>

<body>
    
<div id="app" v-cloak>   
        <div style="width:100%;text-align:center ">
            <label style="font-weight:bold">安全作业方案</label>
        </div>
        <el-form :model="Form" status-icon style="margin-top:5px;width:100%" class="safeCard">
            <el-row>
                <el-col span="12">

                    {{SafeOperationPlan.ApplicationTime+mark.m}} {{Form.ApplicationTime}}

                </el-col>
                <el-col span="12">

                    {{SafeOperationPlan.ApplicationNumber+mark.m}} {{Form.ApplicationNumber}}

                </el-col>
            </el-row>
            <el-row style="border:1px  solid; ">
                <el-col :span="11">
                    <div class="elst-select-mini">
                        <el-form-item>
                            <el-input type="text" v-model="Form.OperatingName" autocomplete="off" size="mini">
                                <template slot="prepend">
                                    {{SafeOperationPlan.OperatingName+mark.m}}
                                </template>
                            </el-input>
                        </el-form-item>
                    </div>
                </el-col>
                <el-col :span="11">
                    <div class="elst-select-mini">
                        <el-form-item>
                            <el-input type="text" v-model="Form.JobManagere" autocomplete="off" size="mini">
                                <template slot="prepend">
                                    {{SafeOperationPlan.JobManagere+mark.m}}
                                </template>
                            </el-input>
                        </el-form-item>
                    </div>
                </el-col>
            </el-row>

            <el-row style="border:1px  solid;border-top:0px; ">
                <el-col :span="11">
                    <div class="elst-select-mini">
                        <el-form-item>
                            <el-input type="text" v-model="Form.JobLocation" autocomplete="off" size="mini">
                                <template slot="prepend">
                                    {{SafeOperationPlan.JobLocation+mark.m}}
                                </template>
                            </el-input>
                        </el-form-item>
                    </div>
                </el-col>
                <el-col :span="11">
                    <div class="elst-select-mini" style="padding-left:10px">
                        <el-form-item :label="SafeOperationPlan.JobStartTime+mark.m" class="inputTextarea">
                            <!-- 弹出页的其它不能成组的控件添加class="inputTextarea"，达到label与input、select等控件的label对齐的目的 -->
                            <el-date-picker v-model="Form.JobStartTime" value-format="yyyy-MM-dd" type="date"
                                placeholder="选择日期">
                            </el-date-picker>
                        </el-form-item>
                    </div>
                </el-col>



            </el-row>

            <el-row style="border:1px  solid; border-top:0px;">
                <el-col :span="23">
                    <div class="elst-select-mini">
                        <el-form-item>
                            <el-input type="text" v-model="Form.Operators" autocomplete="off" size="mini">
                                <template slot="prepend">
                                    {{SafeOperationPlan.Operators+mark.m}}
                                </template>
                            </el-input>
                        </el-form-item>
                    </div>
                </el-col>
            </el-row>
            <el-row style="border:1px  solid;border-top:0px; ">
                <el-col :span="23">
                    <div class="elst-select-mini">
                        <el-form-item>
                            <el-input type="text" v-model="Form.RequiredTools" autocomplete="off" size="mini">
                                <template slot="prepend">
                                    {{SafeOperationPlan.RequiredTools+mark.m}}
                                </template>
                            </el-input>
                        </el-form-item>
                    </div>
                </el-col>
            </el-row>
            <el-row style="border:1px  solid;border-top:0px; ">
                <el-col :span="23">
                    <div class="elst-select-mini">
                        <el-form-item>
                            <el-input type="text" v-model="Form.MaterialsNeeded" autocomplete="off" size="mini">
                                <template slot="prepend">
                                    {{SafeOperationPlan.MaterialsNeeded+mark.m}}
                                </template>
                            </el-input>
                        </el-form-item>
                    </div>
                </el-col>
            </el-row>
            <el-row style="border:1px  solid;border-top:0px; ">
                <el-col :span="23">
                    <div class="elst-select-mini">
                        <el-form-item>
                            <el-input type="text" v-model="Form.ProtectiveEquipment" autocomplete="off" size="mini">
                                <template slot="prepend">
                                    {{SafeOperationPlan.ProtectiveEquipment+mark.m}}
                                </template>
                            </el-input>
                        </el-form-item>
                    </div>
                </el-col>
            </el-row>

            <el-row style="border:1px  solid; border-top:0px; ">
                <el-col span="24">
                    <span class="fl">
                        {{SafeOperationPlan.LicenseProcessed +mark.m}}
                    </span>
                    <el-form-item class="fl ml10">
                        <el-checkbox-group v-model="Form.LicenseProcessed" @change="handleChecked">
                            <el-checkbox v-for="city in JobDescription" :label="city.value" :key="city.key">
                                {{city.value}}</el-checkbox>
                        </el-checkbox-group>
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row style="border:1px  solid; border-top:0px;  ">
                <el-col span="24">
                    <el-form-item :label="SafeOperationPlan.JobTask+mark.m">
                        <el-input type="textarea" v-model="Form.JobTask">
                        </el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row style="border:1px  solid; border-top:0px; ">
                <el-col span="24">
                    <el-form-item :label="SafeOperationPlan.JobDeploymentMethod+mark.m">
                        <el-input type="textarea" v-model="Form.JobDeploymentMethod"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row style="border:1px  solid; border-top:0px; ">
                <el-col span="24">
                    <el-form-item :label="SafeOperationPlan.DrawingsOrCalculations+mark.m">
                        <el-input type="textarea" v-model="Form.DrawingsOrCalculations"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row style="border:1px  solid; border-top:0px; ">
                <el-col span="24">
                    <el-form-item :label="SafeOperationPlan.OperationProcess+mark.m">
                        <el-input type="textarea" v-model="Form.OperationProcess"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <!--风险识别及安全措施:跳多个风险步骤-->
            <!--<el-row style="border:1px  solid; border-top:0px; ">
        <el-col span="24" style="  padding-left:40px">
            {{SafeOperationPlan.SafetyTechnicalMeasures+mark.m}} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href=" javascript:void(0)" @click="Riskstep('tj')" style=" color:#FF0000">点击进入</a>
        </el-col>
    </el-row>-->
            <!--风险识别及安全措施: 只跳检维修作业活动 作业活动等于作业步骤-->
            <el-row style="border:1px  solid; border-top:0px;    ">
                <el-col span="24">
                    {{SafeOperationPlan.SafetyTechnicalMeasures+mark.m}}
                    <a href="javascript:void(0)" @click="MaintenanceActivities('tj')">添加</a>
                </el-col>
            </el-row>
            <el-row style="border:1px  solid; border-top:0px;    ">
                <el-col span="24">
                    <el-table :data="Form.RiskIdentificationSafety" style="width: 100%;margin-bottom: 20px;" border
                        row-style="height:10px">
                        <el-table-column type="index" :label="JobLicenseManagement.SerialNumber" :index="indexMethod"
                            width="50" show-overflow-tooltip="true"></el-table-column>
                        <el-table-column prop="RiskStepsName" :label="JSPAnalyticalManagement.WorkProcedure">
                        </el-table-column>
                        <el-table-column prop="Risk" :label="JSPAnalyticalManagement.Risk">
                        </el-table-column>
                        <el-table-column prop="HazardousFactors" :label="JSPAnalyticalManagement.HazardousFactors">
                        </el-table-column>
                        <el-table-column prop="ControlRequirement" :label="JSPAnalyticalManagement.ControlRequirements">
                        </el-table-column>
                        <el-table-column label="操作">
                            <template slot-scope="scope">
                                <el-button
                                    @click.native.prevent="deleteRow(scope.$index, Form.RiskIdentificationSafety)"
                                    type="text" size="small">
                                    移除
                                </el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-col>
            </el-row>

            <el-row style="border:1px  solid; border-top:0px;">
                <el-col span="24">
                    <el-form-item :label="SafeOperationPlan.safetyEmergencyTreatmentPlan+mark.m">
                        <el-input type="textarea" v-model="Form.safetyEmergencyTreatmentPlan"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row style="border:1px  solid; border-top:0px;  ">
                <el-col span="24">
                    <el-form-item :label="SafeOperationPlan.Remarks+mark.m">
                        <el-input type="textarea" v-model="Form.Remarks">
                        </el-input>
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row style="border:1px  solid; border-top:0px;    ">
                <el-col span="24">
                    {{SafeOperationPlan.SigningStaff+mark.m}} <a href="javascript:void(0)"
                        @click="UserInput('tj')">添加</a>
                </el-col>
            </el-row>
            <el-row style="border:1px  solid; border-top:0px;    ">

                <el-col span="24">
                    <el-table :data="Form.SigningStaff" border>
                        <el-table-column prop="Unit" :label="SafeOperationPlan.Unit">
                        </el-table-column>
                        <el-table-column prop="SigningPeople" :label="SafeOperationPlan.SigningPeople">
                        </el-table-column>
                        <el-table-column label="操作">
                            <template slot-scope="scope">
                                <el-button @click.native.prevent="deleteRow(scope.$index, Form.SigningStaff)"
                                    type="text" size="small">
                                    移除
                                </el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-col>
            </el-row>
            <el-row style="border:1px  solid; border-top:0px; ">
                <el-col span="24">
                    <el-form-item>
                        <span class="fl">
                            {{SafeOperationPlan.OperatorSafetyTechnologyConfirmation+mark.m}}
                        </span>
                        <el-checkbox-group class="fl ml10" v-model="Form.OperatorSafetyTechnologyConfirmation"
                            @change="handleCheckedConfirmation">
                            <el-checkbox v-for="city in OperatorSafetyTechnologyConfirmation" :label="city.value"
                                :key="city.key">{{city.value}}</el-checkbox>
                        </el-checkbox-group>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row style="border:1px #000 solid;border-top:0px;">
                <el-col span="12">
                    <span class="fl ml10" style="margin-top: 4px;">
                        {{SafeOperationPlan.contractor+mark.m}}
                    </span>
                    <el-form-item>
                        <el-select @visible-change="visibleChange" size="mini" v-model="Form.contractor">
                            <el-option v-for="item in contractor" :label="item.value" :value="item.key"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col span="12">
                    <div class="elst-select-mini">
                        <el-form-item>
                            <el-input size="mini">
                                <template slot="prepend">
                                    {{SafeOperationPlan.ApprovedBy+mark.m}}
                                </template>
                                <treeselect size="mini" v-model="Form.ApprovedBy" :options="PersonInCharge" :flat="true"
                                    :show-count="true" :disable-branch-nodes="true" slot="suffix" placeholder="请选择" />
                            </el-input>
                        </el-form-item>
                    </div>

                </el-col>
            </el-row>
            <el-row>
                <el-form-item style="text-align:center; padding-top:5px">
                    <!--<el-button type="primary" @click="onSubmitForm('ruleForm')">{{col.btnSave}}</el-button>-->
                    <el-button type="primary" @click="onSubmitForm('ruleForm')">{{col.btnCommit}}</el-button>
                    <!--<el-button type="primary" @click="onSubmitForm('ruleForm')">{{col.btnBack}}</el-button>-->
                </el-form-item>
            </el-row>
        </el-form>
        <el-dialog :title="title" :visible.sync="ListItem.dialogVisible" width="90%" height="90%" top="10vh"
            fullscreen="true">
            <iframe ref="iframe" :src="ListItem.InputUrl" style="height:95%;width:100%" frameborder="0"></iframe>
        </el-dialog>
    </div>
    <script type="text/javascript">
        Vue.component('treeselect', VueTreeselect.Treeselect)
        app = new Vue({
            el: '#app',
            data: {
                id: '',
                title: '',
                Form: {
                    OperatingUnit: '',//作业单位
                    ApplicationNumber: '',//申请编号
                    ApplicationTime: '',//申请时间
                    OperatingName: '',//"作业名称",
                    JobManagere: '',//作业负责人
                    JobLocation: '',//作业地点
                    JobStartTime: '',//作业起始时间
                    Operators: '',//作业人员
                    RequiredTools: '',//所需工具
                    MaterialsNeeded: '',//所需材料
                    ProtectiveEquipment: '',//防护用品
                    LicenseProcessed: [],//需办理的许可证
                    JobTask: '',//作业任务
                    JobDeploymentMethod: '',//"二、作业部署方法",
                    DrawingsOrCalculations: '',//"三、图纸或计算",
                    OperationProcess: '',// "四、作业流程",
                    //SafetyTechnicalMeasures: '',//"五、安全技术措施",
                    RiskIdentificationSafety: [],//"五、安全技术措施",
                    safetyEmergencyTreatmentPlan: '',//"六、安全应急处理方案",
                    Remarks: '',//"备注",
                    SigningStaff: [],//会签
                    OperatorSafetyTechnologyConfirmation: [],// "作业人员安全技术交底确认",
                    contractor: '',//承包商
                    ApprovedUnit: '',//批准人部门
                    ApprovedBy: null,//批准人
                },
                JobDescription: [],
                OperatorSafetyTechnologyConfirmation: [],
                contractor: [],

                rules: {},
                ListItem: ListItem,
                mydata: PersonInChargeTree,
                PersonInCharge: [],

            },
            methods: {
                //解決edge下select bug
                visibleChange: function (isVisible) {
                    visibleChange(isVisible)
                },
                indexMethod: function (index) {
                    return (this.ListItem.currentPage - 1) * this.ListItem.pagesize + index + 1;
                },
                //只跳检维修作业活动 作业活动等于作业步骤
                MaintenanceActivities: function (val, id) {
                    this.title = "风险识别及安全措施管理";
                    DialogShow(this, val, "../JobSafetyManagement/StasRiskControlInformationDatabase/MaintenanceActivitiesList.html", id);
                },

                Riskstep: function (val, id) {
                    this.title = "安全技术措施";
                    DialogShow(this, val, "../JobSafetyManagement/GeneralLiftingWorkSafety/RiskstepsInformationBaseList.html", id);
                },
                handleNodeClick: function (data) {
                    console.log(data);
                },
                handleChecked: function (value) {
                },
                handleCheckedConfirmation: function (value) {
                },
                deleteRow: function (index, rows) {
                    rows.splice(index, 1);
                },
                getData: function () {
                    getData(this, '/api/SafeOperationPlan/get?id=' + this.id);
                },
                UserInput: function (val, id) {
                    this.title = "会签管理";
                    DialogShow(this, val, "SigningStaffInput.html", id);
                },
                //提交数据
                onSubmitForm: function (formName) {
                    var mythis = this;
                    //this.$refs[formName].validate(function (valid) {
                    //    //验证通过
                    //    if (valid) {
                    onSubmitForm(this, '/api/SafeOperationPlan/Save', mythis.Form);
                    //} else {
                    //    //验证失败
                    //    return false;
                    //}
                    //});
                },
            },
            mounted: function () {
                this.PersonInCharge = fn(this.mydata, "0");
                var list = getDicDataArray(['91', '90', '12', '14', '16']);
                this.JobDescription = getDicDatafromArray('91', list);//工作类型
                this.OperatorSafetyTechnologyConfirmation = getDicDatafromArray('90', list);//工作类型
                this.contractor = getDicDatafromArray('12', list);//工作类型
                this.ApprovedUnit = getDicDatafromArray("14", list),//批准人部门
                    this.ApprovedBy = getDicDatafromArray("16", list),//批准人
                    this.id = getUrlParam("id");
                this.getData();
                if (this.id == null) {
                    //getData(this, '/api/JobLicenseManagement/getA?id=' + this.id);
                    this.Form.ApplicationNumber = "申请编号";
                    this.Form.ApplicationTime = "2019-05-30";
                }
            }
        });
    </script>
</body>

</html>